<template>
  <vol-box
    :lazy="true"
    v-model="model"
    title="选择合同商品"
    :height="400"
    :width="1200"
    :padding="5"
    :on-model-close="cancelBtn"
  >
    <div class="searchBox">
      <div class="formBox">
        <div class="item">
          <label for="inp">商品编码：</label>
          <el-input
            id="inp"
            placeholder="商品编码"
            v-model="form.goods_sub"
            @keyup="voucherKeyup"
          >
          </el-input>
        </div>
        <div class="item">
          <label for="inp">发货状态：</label>
          <el-select
            clearable
            id="select"
            v-model="form.logistics_status"
            placeholder="发货状态"
          >
            <el-option
              v-for="item in logistics_status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div class="item">
          <label for="inp">安装状态：</label>
          <el-select
            clearable
            id="select"
            v-model="form.install_status"
            placeholder="安装状态"
          >
            <el-option
              v-for="item in Install_status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
      </div>

      <div class="selectBtn">
        <el-button type="primary" @click="requestData"> 搜 索 </el-button>
      </div>
    </div>
    <p>搜索功能暂不可用</p>

    <el-table
      ref="table"
      :data="selectTableData"
      stripe
      style="width: 100%"
      :header-cell-style="{ background: `#f8f8f9`, color: `#616161` }"
      border
      height="465"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="changeSelectable"
      >
      </el-table-column>
      <el-table-column prop="Goods_sub" label="商品编码" width="150">
      </el-table-column>
      <el-table-column prop="Goods_name" label="商品名称" width="200">
      </el-table-column>
      <el-table-column prop="Goods_num" label="数量"> </el-table-column>
      <el-table-column prop="Goods_size" label="规格型号"> </el-table-column>
      <el-table-column prop="Goods_price" label="单价"> </el-table-column>
      <el-table-column prop="Total_price" label="总价" width="100">
      </el-table-column>
      <el-table-column prop="Logistics_status" label="发货状态" width="100">
        <template #default="scope">
          <span
            class="purchase_state"
            :class="{
              purchase_stateOne: scope.row.Goods_in_state == 0,
              purchase_stateOne: scope.row.Goods_in_state == 3,
              purchase_stateThree: scope.row.Goods_in_state == 1,
              purchase_stateTwo: scope.row.Goods_in_state == 2,
            }"
            >{{
              logistics_status_options[scope.row.Logistics_status].label
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="Install_status" label="安装状态" width="100">
        <template #default="scope">
          <span
            class="purchase_state"
            :class="{
              purchase_stateOne: scope.row.Goods_in_state == 0,
              purchase_stateOne: scope.row.Goods_in_state == 3,
              purchase_stateThree: scope.row.Goods_in_state == 1,
              purchase_stateTwo: scope.row.Goods_in_state == 2,
            }"
            >{{ Install_status_options[scope.row.Install_status].label }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="Remark" label="备注"> </el-table-column>
    </el-table>
    <template #footer>
      <div>
        <el-button type="primary" @click="confirmBtnFn"> 确定 </el-button>
      </div>
    </template>
  </vol-box>
</template>

<script>
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: {
    "vol-box": VolBox,
  },
  data() {
    return {
      model: false,
      tableData: [],
      selectTableData: [],
      form: {
        goods_sub: "",
        logistics_status: "0",
        // install_status: "",
      },
      // Logistics_status: ["未发货", "发货完成", "发货中", "无需发货"],
      // Install_status: ["未安装", "安装完成", "安装中", "无需安装"],
      logistics_status_options: [
        {
          value: "0",
          label: "未发货",
        },
        {
          value: "1",
          label: "发货完成",
        },
        {
          value: "2",
          label: "未发货",
        },
        {
          value: "3",
          label: "无需发货",
        },
      ],
      Install_status_options: [
        {
          value: "0",
          label: "未安装",
        },
        {
          value: "1",
          label: "安装完成",
        },
        {
          value: "2",
          label: "安装中",
        },
        {
          value: "3",
          label: "无需安装",
        },
      ],
    };
  },
  watch: {},
  methods: {
    open(ID) {
      this.model = true;
      this.ID = ID;
      this.requestData(ID);
    },
    async onModelClose() {
      this.ID = null;
      this.form = {
        goods_sub: "",
        logistics_status: "0",
      };
    },
    voucherKeyup() {},
    cancelBtn() {
      //   this.form = {
      //     voucher: "",
      //     paymentType: "",
      //     state: "1",
      //   };
      //   this.tableData = [];
      this.model = false;
    },
    // handleSelectionChange(val) {
    // //   this.multipleSelection = val;
    // },
    selectBtn() {
      console.log(this.form);
      if (
        !this.form.goods_sub &&
        !this.form.logistics_status
        // && !this.form.install_status
      ) {
        this.selectTableData = this.tableData;
      }
      // else if (
      //   this.form.goods_sub &&
      //   this.form.logistics_status
      //   // && this.form.install_status
      // ) {
      //   this.selectTableData = this.tableData.filter((item) => {
      //     return (
      //       item.Goods_sub == this.form.goods_sub &&
      //       item.Logistics_status == this.form.logistics_status
      //       // && item.Install_status == this.form.install_status
      //     );
      //   });
      // }
      else if (this.form.goods_sub && this.form.logistics_status) {
        this.selectTableData = this.tableData.filter(
          (item) =>
            item.Goods_sub == this.form.goods_sub &&
            item.Logistics_status == this.form.logistics_status
        );
      }
      //#region
      // else if (this.form.goods_sub && this.form.install_status) {
      //   this.selectTableData = this.tableData.filter(
      //     (item) =>
      //       item.Goods_sub == this.form.goods_sub &&
      //       item.Install_status == this.form.install_status
      //   );
      // }
      // else if (this.form.logistics_status && this.form.install_status) {
      //   this.selectTableData = this.tableData.filter(
      //     (item) =>
      //       item.Logistics_status == this.form.logistics_status &&
      //       item.Install_status == this.form.install_status
      //   );
      // }
      //#endregion
      else if (this.form.goods_sub) {
        this.selectTableData = this.tableData.filter(
          (item) => item.Goods_sub == this.form.goods_sub
        );
      } else if (this.form.logistics_status) {
        this.selectTableData = this.tableData.filter(
          (item) => item.Logistics_status == this.form.logistics_status
        );
      }
      // else if (this.form.install_status) {
      //   this.selectTableData = this.tableData.filter(
      //     (item) => item.Install_status == this.form.install_status
      //   );
      // }

      console.log(this.tableData);
    },
    confirmBtnFn() {
      let selectionRows = this.$refs.table.getSelectionRows();
      this.$emit("parentCall", ($parent) => {
        let detailRowData = $parent.$refs.detail.rowData;
        /*
         let arr = [];
        let stringName = "";
        console.log("detailRowData", detailRowData.length);
        if (detailRowData.length) {
          detailRowData.forEach((item) => {
            selectionRows.forEach((j) => {
              if (j.Goods_usb == item.Goods_sub) {
                stringName += stringName ? "," + j.Goods_name : j.Goods_name;
                arr.push(j.Goods_sub);
              }
            });
          });
        } else {
          selectionRows.forEach((j) => {
            j.Install_status += "";
            j.Logistics_status += "";
          });
        }

        if (stringName != "") {
          console.log(stringName);
          this.$message.warning("明细表已存在 " + stringName);
        }
        arr.forEach((item) => {
          let index = selectionRows.findIndex((x) => x.Goods_sub == item);
          if (index != -1) {
            selectionRows.splice(index, 1);
          }
        });
        */

        selectionRows.forEach((j) => {
          j.Install_status += "";
          j.Logistics_status += "";
        });
        $parent.$refs.detail.rowData.unshift(...selectionRows);
      });
      this.onModelClose();
      return (this.model = false);
    },
    requestData() {
      console.log("ID", ID);
      let url = "api/q_sales_contract/getDetailPage";
      let param = {
        order: "desc",
        page: 1,
        rows: 100,
        sort: "Goods_sub",
        value: this.ID,
        wheres: "[]",
      };
      this.http.post(url, param, "").then((res) => {
        try {
          console.log("res", res);
          this.tableData = res.rows;
          if (!this.form.goods_sub && !this.form.logistics_status) {
            this.selectTableData = this.tableData;
          } else if (this.form.goods_sub && this.form.logistics_status) {
            this.selectTableData = this.tableData.filter(
              (item) =>
                item.Goods_sub == this.form.goods_sub &&
                item.Logistics_status == this.form.logistics_status
            );
          } else if (this.form.goods_sub) {
            this.selectTableData = this.tableData.filter(
              (item) => item.Goods_sub == this.form.goods_sub
            );
          } else if (this.form.logistics_status) {
            this.selectTableData = this.tableData.filter(
              (item) => item.Logistics_status == this.form.logistics_status
            );
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.purchase_state {
  border-radius: 7px;
  padding: 2px;
  font-size: 12px;
  color: rgb(239, 180, 111);
  background-color: rgba(239, 180, 111, 0.2);
  border: 1px solid rgba(239, 180, 111, 0.3);
}
.purchase_stateZero {
  color: red;
  background-color: rgba(240, 13, 48, 0.2);
  border: 1px solid rgba(240, 13, 48, 0.3);
}
.purchase_stateOne {
  color: rgb(239, 180, 111);
  background-color: rgba(239, 180, 111, 0.2);
  border: 1px solid rgba(239, 180, 111, 0.3);
}
.purchase_stateTwo {
  color: rgb(64, 158, 255);
  background-color: rgba(64, 158, 255, 0.2);
  border: 1px solid rgba(64, 158, 255, 0.3);
}
.purchase_stateThree {
  color: rgb(7, 217, 63);
  background-color: rgba(7, 217, 63, 0.2);
  border: 1px solid rgba(7, 217, 63, 0.3);
}
.searchBox {
  display: flex;
}
.formBox {
  flex: 10;
  display: flex;
  justify-content: space-around;
  .item {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    width: 50%;
    height: 50px;
    label {
      width: 30%;
      line-height: 33px;
      text-align: right;
    }
    .el-input,
    .el-select {
      width: 70%;
    }
  }
}
.selectBtn {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
</style>